<template>
  <view class="page_root" data-page-name="我的日报" data-page-identification="f_kanv4eztf0">
      
    <!-- begin vid_2rbza48zww 自定义模板_5nlktstzv0 -->
    <view class="main">
      <u-picker v-model="recordState.dateShow" mode="time" @confirm="onConfirm" @cancel="onCancel"></u-picker>
      <view class="record-date" @click="changeDate">
        <view class="date-left">{{ recordState.selectedDate }}</view>
        <view class="date-right"><u-icon name="calendar" size="32"></u-icon></view>
      </view>

      <view class="record-body" v-if="recordState.recordList.length > 0">
        <view class="record-title">
          <view class="title-left">{{ recordState.selectedDate }}</view>
          <view class="title-right"></view>
        </view>
        <view class="record-content" v-for="(item, index) in recordState.recordList">
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="11">
              <view class="project-name"><span style="margin-right: 2px;">{{ item.projectCode }}</span> <u-tag v-if="item.status === '已通过'" text="已通过" type="success" mode="light" size="mini" />
            <u-tag v-else-if="item.status === '已提交'" text="已提交" mode="light" size="mini" />
            <u-tag v-else-if="item.status === '未提交'" text="未提交" type="warning" mode="light" size="mini" />
            <u-tag v-else-if="item.status === '被驳回'" text="被驳回" type="error" mode="light" size="mini" /></view>
            </u-col>
            <u-col style="text-align: left;" span="1"><u-icon name="trash" size="32" color="red" @click="deleteRecord(item.dailyItemId)"></u-icon></u-col>
          </u-row>
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="4" style="padding-right: 0;">
              <view class="phase">项目阶段：</view>
            </u-col>
            <u-col span="8" style="padding: 0;">
              <view class="phase-content">{{ item.milepostName }}</view>
            </u-col>
          </u-row>
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="4" style="padding-right: 0;">
              <view class="task-name">任务：</view>
            </u-col>
            <u-col span="8" style="padding: 0;">
              <view class="task-name-content">{{ item.taskName }}</view>
            </u-col>
          </u-row>
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="4" style="padding-right: 0;">
              <view class="task-time">任务工时：</view>
            </u-col>
            <u-col span="8" style="padding: 0;">
              <view class="task-time-content">{{ item.workingHours }}</view>
            </u-col>
          </u-row>
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="4" style="padding-right: 0;">
              <view class="description">事项描述：</view>
            </u-col>
            <u-col span="8" style="padding: 0;">
              <view class="description-content">{{ item.dailyContent }}</view>
            </u-col>
          </u-row>
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="4" style="padding-right: 0;">
              <view class="risk">是否存在风险：</view>
            </u-col>
            <u-col span="8" style="padding: 0;">
              <view class="risk-content">{{ item.risk }}</view>
            </u-col>
          </u-row>
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="4" style="padding-right: 0;">
              <view class="risk-description">风险描述：</view>
            </u-col>
            <u-col span="8" style="padding: 0;">
              <view class="risk-description-content">{{ item.riskDescription }}</view>
            </u-col>
          </u-row>
          <u-row gutter="16" class="content-box" align="top">
            <u-col span="4" style="padding-right: 0;">
              <view class="solution">解决方案：</view>
            </u-col>
            <u-col span="8" style="padding: 0;">
              <view class="solution-content">{{ item.solution }}</view>
            </u-col>
          </u-row>
          <u-line color="#D9D9D9" />
        </view>
      </view>
      <view class="no-data" v-else>
        <view class="no-tip">暂无数据</view>
      </view>
      <!-- end vid_q0bo8r9rh5 标签页_zd90mmmi4z -->
    </view>
    <view class="fixed-button" @click="handleSubmit">提交</view>
    <!-- 删除提示 -->
    <view>
      <u-modal v-model="recordState.deleteShow" content="确认删除这条日报吗？" show-cancel-button @confirm="handleDeleteRecord"></u-modal>
    </view>
    <view>
      <u-toast ref="uToast"></u-toast>
    </view>
    <!-- end vid_2rbza48zww 自定义模板_5nlktstzv0 -->
    <!-- begin vid_uydsyrne1i 容器_dndy9jhpzo -->
    <view v-if="showState.vid_uydsyrne1i_visible" data-unique-id="vid_uydsyrne1i" ref="vid_uydsyrne1i_ref" class="al-container vid_uydsyrne1i">
      <!-- begin vid_k224azwnxc 图片_3tq2jp2081 -->
      <u-image
        v-if="showState.vid_k224azwnxc_visible"
        data-unique-id="vid_k224azwnxc"
        ref="vid_k224azwnxc_ref"
        class="vid_k224azwnxc"
        :custom-style="vid_k224azwnxc_customStyleProps"
        :src="vid_k224azwnxc_props.src"
        :mode="vid_k224azwnxc_props.mode"
        :width="vid_k224azwnxc_props.width"
        :height="vid_k224azwnxc_props.height"
        :shape="vid_k224azwnxc_props.shape"
        :borderRadius="vid_k224azwnxc_props.borderRadius"
        :lazyLoad="vid_k224azwnxc_props.lazyLoad"
        :showMenuByLongpress="vid_k224azwnxc_props.showMenuByLongpress"
        :showLoading="vid_k224azwnxc_props.showLoading"
        :showError="vid_k224azwnxc_props.showError"
        :fade="vid_k224azwnxc_props.fade"
        :webp="vid_k224azwnxc_props.webp"
        :duration="vid_k224azwnxc_props.duration"
        :bgColor="vid_k224azwnxc_props.bgColor"
      >
      </u-image>
      <!-- end vid_k224azwnxc 图片_3tq2jp2081 -->
    </view>
    <!-- end vid_uydsyrne1i 容器_dndy9jhpzo -->
  </view>
</template>
<script setup>

  import {
    ref,reactive,toRaw,markRaw,
    watch,computed,
    onBeforeMount,onMounted,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,getCurrentInstance
  } from "vue";
  import { useRoute } from 'vue-router';
  const route = useRoute();
  import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
  import { isEqual, cloneDeep, isNullOrEmpty, isEmptyArr, isArray, isNullOrUnDef, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, switchCase, dateParse, debounce } from '@/utils/index';
  import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
  import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
  import { FormFormat } from '@/utils/formFormat'
  import dayjs from 'dayjs';
  // import '@vueup/vue-quill/dist/vue-quill.snow.css';
  
  import { handleRedirect, permission } from '@/utils/common'
  import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll } from '@dcloudio/uni-app'
  


  // ---------------------------- 属性定义 ----------------------------
  const sourceId = "page50001911"

    // 是否显示菜单按钮
    const isMenuIconShow = false;
    // NAVIGATION_MENU
    const handleShowNavigation = ()=>{};


  const setTimeOutList = [];


      const vid_2rbza48zww_props = reactive({
        code: " <view class=\"main\">\n      <u-picker v-model=\"recordState.dateShow\" mode=\"time\" @confirm=\"onConfirm\" @cancel=\"onCancel\"></u-picker>\n      <view class=\"record-date\" @click=\"changeDate\">\n        <view class=\"date-left\">{{ recordState.selectedDate }}</view>\n        <view class=\"date-right\"><u-icon name=\"calendar\" size=\"32\"></u-icon></view>\n      </view>\n\n      <view class=\"record-body\" v-if=\"recordState.recordList.length > 0\">\n        <view class=\"record-title\">\n          <view class=\"title-left\">{{ recordState.selectedDate }}</view>\n          <view class=\"title-right\"></view>\n        </view>\n        <view class=\"record-content\" v-for=\"(item, index) in recordState.recordList\">\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"8\">\n              <view class=\"project-name\">{{ item.projectCode }}</view>\n            </u-col>\n            <u-col span=\"3\">\n              <view v-if=\"item.status === '已通过'\"><u-tag text=\"已通过\" type=\"success\" mode=\"light\" size=\"mini\" /></view>\n              <view v-else-if=\"item.status === '已提交'\"><u-tag text=\"已提交\" mode=\"light\" size=\"mini\" /></view>\n              <view v-else-if=\"item.status === '未提交'\"><u-tag text=\"未提交\" type=\"warning\" mode=\"light\" size=\"mini\" /></view>\n              <view v-else-if=\"item.status === '被驳回'\"><u-tag text=\"被驳回\" type=\"error\" mode=\"light\" size=\"mini\" /></view>\n            </u-col>\n            <u-col span=\"1\"><u-icon name=\"trash\" size=\"32\" color=\"red\"\n                @click=\"deleteRecord(item.dailyItemId)\"></u-icon></u-col>\n          </u-row>\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"4\" style=\"padding-right: 0;\">\n              <view class=\"phase\">项目阶段：</view>\n            </u-col>\n            <u-col span=\"8\" style=\"padding: 0;\">\n              <view class=\"phase-content\">{{ item.milepostName }}</view>\n            </u-col>\n          </u-row>\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"4\" style=\"padding-right: 0;\">\n              <view class=\"task-name\">任务：</view>\n            </u-col>\n            <u-col span=\"8\" style=\"padding: 0;\">\n              <view class=\"task-name-content\">{{ item.taskName }}</view>\n            </u-col>\n          </u-row>\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"4\" style=\"padding-right: 0;\">\n              <view class=\"task-time\">任务工时：</view>\n            </u-col>\n            <u-col span=\"8\" style=\"padding: 0;\">\n              <view class=\"task-time-content\">{{ item.workingHours }}</view>\n            </u-col>\n          </u-row>\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"4\" style=\"padding-right: 0;\">\n              <view class=\"description\">事项描述：</view>\n            </u-col>\n            <u-col span=\"8\" style=\"padding: 0;\">\n              <view class=\"description-content\">{{ item.dailyContent }}</view>\n            </u-col>\n          </u-row>\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"4\" style=\"padding-right: 0;\">\n              <view class=\"risk\">是否存在风险：</view>\n            </u-col>\n            <u-col span=\"8\" style=\"padding: 0;\">\n              <view class=\"risk-content\">{{ item.risk }}</view>\n            </u-col>\n          </u-row>\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"4\" style=\"padding-right: 0;\">\n              <view class=\"risk-description\">风险描述：</view>\n            </u-col>\n            <u-col span=\"8\" style=\"padding: 0;\">\n              <view class=\"risk-description-content\">{{ item.riskDescription }}</view>\n            </u-col>\n          </u-row>\n          <u-row gutter=\"16\" class=\"content-box\" align=\"top\">\n            <u-col span=\"4\" style=\"padding-right: 0;\">\n              <view class=\"solution\">解决方案</view>\n            </u-col>\n            <u-col span=\"8\" style=\"padding: 0;\">\n              <view class=\"solution-content\">{{ item.solution }}</view>\n            </u-col>\n          </u-row>\n          <u-line color=\"#D9D9D9\" />\n        </view>\n      </view>\n      <view class=\"no-data\" v-else>\n        <view class=\"no-tip\">暂无数据</view>\n      </view>\n      <!-- end vid_q0bo8r9rh5 标签页_zd90mmmi4z -->\n    </view>\n    <view class=\"fixed-button\" @click=\"handleSubmit\">提交</view>\n    <!-- 删除提示 -->\n    <view>\n      <u-modal v-model=\"recordState.deleteShow\" content=\"确认删除这条日报吗？\" show-cancel-button\n        @confirm=\"handleDeleteRecord\"></u-modal>\n    </view>\n    <view>\n      <u-toast ref=\"uToast\"></u-toast>\n    </view>",
    });

      const vid_uydsyrne1i_props = reactive({
        systemFieldShow: false,
    });
import vid_k224azwnxc_imageUrl from '@/static/images/377492a9abd1033b56f8765591e4514f.png'

      const vid_k224azwnxc_props = reactive({
        src: vid_k224azwnxc_imageUrl,
      mode: "aspectFill",
      width: "83",
      height: "75",
      shape: "square",
      borderRadius: 0,
      lazyLoad: true,
      showMenuByLongpress: true,
      showLoading: true,
      showError: true,
      fade: true,
      webp: false,
      duration: 500,
      bgColor: "#F3F4F6",
    });


    const vid_k224azwnxc_customStyleProps = reactive({
      "boxShadow": "0px 0px 0px 0px ",
      })

  // ============================ 属性定义 ============================

  // ---------------------------- 元素数据引用 ----------------------------
  // 组件 自定义模板_5nlktstzv0 ref 的引用
  const vid_2rbza48zww_ref = ref(null);
  // 组件 容器_dndy9jhpzo ref 的引用
  const vid_uydsyrne1i_ref = ref(null);
  // 组件 图片_3tq2jp2081 ref 的引用
  const vid_k224azwnxc_ref = ref(null);
  // 动态key的map
  const fieldTypeMap = {};
  // 动态key的map
  const refMap = {vid_2rbza48zww_ref,vid_uydsyrne1i_ref,vid_k224azwnxc_ref};

  const showState = reactive({
      vid_2rbza48zww_visible: true,
      vid_uydsyrne1i_visible: false,
      vid_k224azwnxc_visible: true,
  })
  // ============================ 元素数据引用 ============================

  // ---------------------------- 数据 ----------------------------


  // ============================ 数据 ============================

  // ---------------------------- 方法 ----------------------------
  // ---------------------------- 页面数据 ----------------------------


  // ============================ 页面数据 ============================

  // ---------------------------- 响应 ----------------------------

  // ============================ 响应 ============================

  // ---------------------------- 函数 ----------------------------

  // 自定义函数 返回上一页
  const customFunction_goBack_td4no8eetz =  (...params) => {
    uni.navigateBack()
  }

  // ============================ 函数 ============================

  // ---------------------------- 页面参数 ----------------------------

  const pageParameter_state = reactive({
      'processInstanceId': undefined,
  })

  // ============================ 页面参数 ============================

  // ---------------------------- 组件事件处理方法 ----------------------------


  // ============================ 组件事件处理方法 ============================

  // ============================ 方法 ============================

  // ---------------------------- 生命周期 ----------------------------

  const pageScrollTop = ref(0)

  

  
  const routeOption = ref({})
  onLoad((option) => {
    routeOption.value = option;
  });
  onReady(() => {
    setPageParams(routeOption.value)
    // 设置表单的rule
    try{

    }catch{
        // do nothing
    }
  });
  // 图表刷新标记
  const uChartsReshowFlag = ref(false);
  onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
      uChartsReshowFlag.value = false
  })
  onShow(() => {
      uChartsReshowFlag.value = true; // 页面激活后,标记置为true

      setPageParams(routeOption.value)
  })
  onPageScroll(e => {
      pageScrollTop.value = e.scrollTop
  });
  

  const setPageParams = (routerParam)=>{
    const pageParams = [{"dataType":"STRING","dependencies":[],"name":"processInstanceId"}];
    const strategyMap = {
      STRING: (param, paramValue) => {
        pageParameter_state[param.name] = paramValue;
      },
      BOOLEAN: (param, paramValue) => {
        if('true' === (paramValue || '').toLowerCase()) {
          pageParameter_state[param.name] = true
        } else if('false' === (paramValue || '').toLowerCase()) {
          pageParameter_state[param.name] = false
        } else {
          // TODO: 是否要支持toast
          console.error('参数传入错误！类型不匹配！');
        }
      },
      NUMBER: (param, paramValue) => {
        if (!isNaN(paramValue)) {
          pageParameter_state[param.name] = Number(paramValue);
        } else {
          // TODO: 是否要支持toast
          console.error('参数传入错误！类型不匹配！');
        }
      },
      ARRAY: (param, paramValue) => {
        if (isNullOrUnDef(paramValue) || !paramValue || paramValue=== 'undefined') { // default value
          pageParameter_state[param.name] = [];
        } else if(paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
          try {
            pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
          } catch (error) {
            console.error('参数解析失败 ',error);
          }
        } else {
          console.error('参数传入错误！类型不匹配！');
        }
      },
    };
    pageParams.forEach((param) => {
      strategyMap[param.dataType](param, routerParam[param.name])
    });


  }

  onUnmounted(() => {
    // 销毁定时器
    setTimeOutList.forEach(({ repeat, timer }) => {
      repeat ?  clearInterval(timer): clearTimeout(timer);
    });
  });


  
  onPullDownRefresh(() => {
    // 下拉刷新
    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 1000)
  })
  

  // ============================ 生命周期 ============================

  // ---------------------------- 数据关联处理 ----------------------------
  // ---------------------------- 组件数据同步 ----------------------------

  // ============================ 组件数据同步 ============================
  //
  // ============================ 数据关联处理 ============================

  // ---------------------- 不同组件自定义的处理逻辑 ---------------------

  // ====================== 不同组件自定义的处理逻辑 ======================


  // ================================定制化逻辑========================================
  import {  nextTick } from 'vue';
  import { onBeforeRouteLeave } from 'vue-router'
  onMounted(async () => {
     let localStorageData = localStorage.getItem('app-user-store')
    if (localStorageData !== null){
      localStorageData = JSON.parse(localStorageData)
      checkToken(localStorageData.token, localStorageData.uuid)
    }else{
    console.log('未找到localStorageData')
    }
    await nextTick(); // 等待DOM渲染完成
    let tabBar = document.querySelector('.uni-tabbar');
    let tabBarHeight = tabBar.offsetHeight;
    let submitBtn = document.querySelector('.fixed-button');
    let bottomSize = tabBarHeight + 'px';
    submitBtn.style.bottom = bottomSize;
  });

  const recordState = reactive({
    dateShow: false,
    selectedDate: null,
    recordList: [],
    deleteShow: false,
    deleteId: null,
    formattedDate: null,
    productId: null,
    phoneType: null
  })
  let localStorageData = localStorage.getItem('app-user-store')
  if (localStorageData !== null) {
    localStorageData = JSON.parse(localStorageData)
    recordState.productId = localStorageData.productId
  }
  const config = {
    headers: {
      'productId': recordState.productId,
    },
  };
  // 选择日期
  function changeDate() {
    recordState.dateShow = true

  }
  // 日期确认
  function onConfirm(params) {
    console.log(params, 'params ')
    recordState.selectedDate = `${params.year}-${params.month}-${params.day}`
    getRecordData()
  }
  // 删除日报
  function deleteRecord(dailyItemId) {
    console.log(dailyItemId, 'dailyItemId')
    recordState.deleteShow = true
    recordState.deleteId = dailyItemId
  }
  function handleDeleteRecord() {
    put(`/ppm/api/v2/built-in-system-ppm/daily/${recordState.deleteId}`).then(data => {
      if (data.code === 200) {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        getRecordData()
        recordState.deleteShow = false
      } else {
        uni.showToast({
          title: '删除失败',
          icon: 'error'
        })
        recordState.deleteShow = false
      }
    })
  }

  // 提交
  async function handleSubmit() {
    try {
      const result = await post('/ppm/api/v2/built-in-system-ppm/daily/weChat/approval-process',null,config);
      if (result.code === 200) {
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        await getRecordData();
      } else {
        uni.showToast({
          title: '提交失败',
          icon: 'error'
        });
              await getRecordData();
      }

    } catch (error) {
      // 请求失败，处理错误

    }
  }
  async function getRecordData() {
    try {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      const formattedDate = `${year}-${month}-${day}`;

      recordState.formattedDate = formattedDate;
      recordState.selectedDate = recordState.selectedDate ? recordState.selectedDate : recordState.formattedDate;

      const params = {
        dailyDate: recordState.selectedDate
      };

      const data = await post('/ppm/api/v2/built-in-system-ppm/daily/weChat/list', params);
      console.log(data.status,'data.status')
      recordState.recordList = data.data.dataList;
    } catch (error) {
      console.error('获取记录数据出现错误:', error);
    }
  }
  let isPageActivated = false;

  onActivated(() => {
    // 在页面被切回时触发事件
    if (!isPageActivated) {
       let localStorageData = localStorage.getItem('app-user-store')
    if (localStorageData !== null){
      localStorageData = JSON.parse(localStorageData)
      checkToken(localStorageData.token, localStorageData.uuid)
    }else{
    console.log('未找到localStorageData')
    }
      isPageActivated = true;
    }
  });

  onDeactivated(() => {
    // 在页面离开时清除标志
    isPageActivated = false;
  });

  async function checkToken(token, uuid) {
    try {
        let params = {
            uuid: uuid,
            token: token,
            appId: 'h5_50000005'
        }
        let result = await post('/base/api/v1/valid', params)
        console.log(result.status,'checkTokenstatus')
        if (result.status === 'success') {
          getRecordData();
        } else {
            console.log('token过期')
        }
    } catch (error) {
        console.error('checkToken出现错误:', error)
    }
  }
</script>
<style lang="less" scoped>
  .page_root {
      min-height: 100%;
      box-sizing: border-box;
      background-color:rgba(53, 117, 199, 1);
  }


  .main {
    padding: 0 16px;
  }

  .record-date {
    display: flex;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 4px;
    margin: 16px 0;
    font-size: 14px;
    color: #fff;
    padding: 0 12px 0 12px;
    line-height: 40px;
  }

  .date-left {
    font-size: 14px;
  }

  .date-right {
    flex: 1;
    text-align: right;
  }

  .record-body {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 66px;
  }

  .record-title {
    height: 32px;
    background-image: linear-gradient(270deg, rgba(26, 179, 255, 0.00) 0%, #1AB3FF 100%);
    border-radius: 4px 4px 0px 0px;
    font-size: 14px;
    padding: 0 12px 0 12px;
    color: #fff;
    display: block;
    line-height: 32px;
    display: flex;
  }


  .title-right {
    flex: 1;
    text-align: right;
  }

  .record-content {
    display: flex;
    flex-direction: column;
    padding: 24px 12px 0 12px;
    font-size: 14px;
  }


  .content-box {
    margin-bottom: 20px;
  }

  .project-name {
    color: #00125E;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 600;
  }

  .phase,
  .task-name,
  .task-time,
  .description,
  .risk,
  .solution,
  .risk-description {
    color: #8c8c8c;
    letter-spacing: 0;
    font-weight: 400;
  }

  .phase-content,
  .task-name-content,
  .task-time-content,
  .description-content,
  .risk-content,
  .solution-content,
  .risk-description-content {
    color: #262626;
    letter-spacing: 0;
    font-weight: 400;
  }

  .fixed-button {
    position: fixed;
    bottom: 50px;
    left: 0;
    width: 100%;
    background-color: #1AB3FF;
    color: #fff;
    padding: 15px;
    text-align: center;
    border: none;
    border-radius: 0;
  }

  .no-data {
    width: 100%;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 20%;
    width: 88px;
    height: 80px;
    background-image: url('@/static/images/377492a9abd1033b56f8765591e4514f.png');
    left: 50%;
    transform: translate(-50%, 0);
  }

  .no-tip {
    position: absolute;
    top: 80px;
    left: 10px;
  }

</style>